<template>
    <Table 
        border
        stripe
        :columns="columns"
        :data="data.data"
        :loading="data.isLoading">
    </Table>
</template>
<script>
import filterTime from '@/filters/filterTime.js'
import filterApp from '@/filters/filterApp.js'

export default {
    name: 'RoomListView.vue',
    props: ['data'],
    data() {
        return {
            columns: [
                {
                    title: 'id',
                    key: 'uuid',
                    width: 180,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '编号',
                    key: 'id',
                    width: 120,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '基本信息',
                    key: 'base_info',
                    width: 240,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        let baseInfo = JSON.parse(params.row.base_info);
                        let array = new Array();
                        array.push(h('p','type:'+baseInfo.type));
                        array.push(h('p','baseScore:'+baseInfo.baseScore));
                        array.push(h('p','zimo:'+baseInfo.zimo));
                        array.push(h('p','jiangdui:'+baseInfo.jiangdui));
                        array.push(h('p','hsz:'+baseInfo.hsz));
                        array.push(h('p','dianganghua:'+baseInfo.dianganghua));
                        array.push(h('p','menqing:'+baseInfo.menqing));
                        array.push(h('p','tiandihu:'+baseInfo.tiandihu));
                        array.push(h('p','maxFan:'+baseInfo.maxFan));
                        array.push(h('p','maxGames:'+baseInfo.maxGames));
                        array.push(h('p','creator:'+baseInfo.creator));
                        return h('div', array);
                    }
                },
                {
                    title: '创建时间',
                    key: 'create_time',
                    width: 110,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        // params 包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引
                        return h('span',filterTime.formatTimestamp(params.row.create_time));
                    }
                },
                // {
                //     title: 'inum_of_turnsd',
                //     key: 'inum_of_turnsd',
                //     width: 80,
                //     tooltip: true,
                //     align: 'center'
                // },
                // {
                //     title: 'next_button',
                //     key: 'next_button',
                //     width: 80,
                //     tooltip: true,
                //     align: 'center'
                // },
                {
                    title: '用户1',
                    key: 'user1',
                    width: 220,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        let id = h('p','用户id:'+params.row.user_id0);
                        let name = h('p','用户名称:'+params.row.user_name0);
                        let score = h('p','用户分数:'+params.row.user_score0);
                        let headIcon = h('img',{
                            attrs: {src: (params.row.user_icon0)},
                            style: {
                                width: "45px",
                            },
                        },'img');
                        let array = new Array();
                        array.push(id);
                        array.push(name);
                        array.push(score);
                        array.push(headIcon);
                        return h('div', array);
                    }
                },
                {
                    title: '用户2',
                    key: 'user2',
                    width: 220,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        let id = h('p','用户id:'+params.row.user_id1);
                        let name = h('p','用户名称:'+params.row.user_name1);
                        let score = h('p','用户分数:'+params.row.user_score1);
                        let headIcon = h('img',{
                            attrs: {src: (params.row.user_icon1)},
                            style: {
                                width: "45px",
                            },
                        },'img');
                        let array = new Array();
                        array.push(id);
                        array.push(name);
                        array.push(score);
                        array.push(headIcon);
                        return h('div', array);
                    }
                },
                {
                    title: '用户3',
                    key: 'user3',
                    width: 220,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        let id = h('p','用户id:'+params.row.user_id2);
                        let name = h('p','用户名称:'+params.row.user_name2);
                        let score = h('p','用户分数:'+params.row.user_score2);
                        let headIcon = h('img',{
                            attrs: {src: (params.row.user_icon2)},
                            style: {
                                width: "45px",
                            },
                        },'img');
                        let array = new Array();
                        array.push(id);
                        array.push(name);
                        array.push(score);
                        array.push(headIcon);
                        return h('div', array);
                    }
                },
                {
                    title: '用户4',
                    key: 'user4',
                    width: 220,
                    tooltip: true,
                    align: 'center',
                    render: function(h,params){
                        let id = h('p','用户id:'+params.row.user_id3);
                        let name = h('p','用户名称:'+params.row.user_name3);
                        let score = h('p','用户分数:'+params.row.user_score3);
                        let headIcon = h('img',{
                            attrs: {src: (params.row.user_icon3)},
                            style: {
                                width: "45px",
                            },
                        },'img');
                        let array = new Array();
                        array.push(id);
                        array.push(name);
                        array.push(score);
                        array.push(headIcon);
                        return h('div', array);
                    }
                },
                {
                    title: 'ip',
                    key: 'ip',
                    width: 130,
                    align: 'center',
                },
                {
                    title: 'port',
                    key: 'port',
                    width: 80,
                    tooltip: true,
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        let detailBtn = h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.onAction({action: 'detail', params: params})
                                }
                            }
                        }, '详情');
                        return h('div', [ detailBtn]);
                    }
                }
            ]
        }
    },
    methods: {
        onAction (actionData) {
            this.$emit('on-action',actionData);
        }
    }
}
</script>
<style lang="less" scoped>

</style>



